// 项目库-项目详情
import React, { useEffect } from 'react';
import { Tabs, Row, Col } from 'antd';
import { observer, useLocalStore } from 'mobx-react-lite';
import moment from 'moment';
import * as detailApi from '~/apis/project/detailApi';
import { getUrlSearch, getStageInfo, getOrgId } from './pageConfig';
import './index.local.sass';

// 页面渲染
const { TabPane } = Tabs;

const ProjectDetails = observer(() => {
  const state = useLocalStore(() => ({
    projectId: getUrlSearch('id') as string,
    projectInfo: null, // 项目详情 信息
    headLogo: '', // 头像logo
    fileUrlPrefix: '', // 文件地址前缀
    visibleFlag: false, // modal弹框显示标志
    tabData: {} as any, // tab数据
  }));

  // 下载文件
  const handleViewFile = (params: string) => {
    if (state.fileUrlPrefix && params) {
      window.location.href = `${state.fileUrlPrefix}${params}`;
    }
  };

  // 获取项目详情
  const getProjectInfo = () => {
    detailApi.getProjectInfo(state.projectId).then((res) => {
      getOrgId(res.data.orgId); // 机构id 验证身份

      state.projectInfo = res.data ? res.data.project : null; // 项目详情

      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.project && res.data.project.thumbnail) {
        state.headLogo = `${res.file_prefix as string}${res.data.project.thumbnail as string}`; // 头像logo
      }

      if (res.data) {
        state.tabData = getStageInfo({ stageDatas: res.data, callBack: handleViewFile });
      }
    });
  };

  // 根据id 查询项目详情
  useEffect(() => {
    getProjectInfo();
  }, []);

  const projectInfo: any = state.projectInfo;

  const { tabData = {} } = state;

  let currentId = 0;

  const getId = () => {
    currentId += 1;

    return currentId.toString();
  };
  return (
    <div className="information-container">
      {/* 基础详情 */}
      <div className="basic">
        <div className="basic-top">
          <h3>Project Details</h3>
        </div>
        <div className="basic-detail">
          <h2>{projectInfo ? projectInfo.projectName : ''}</h2>
          <p><span className="text-gray-600 mr-4">Start time: </span>
            {
              (
                () => {
                  if (projectInfo?.createTime) {
                    return moment(projectInfo.createTime).format('YYYY/MM/DD');
                  }
                  return '';
                }
              )()
            }
          </p>
          <span className="avatar">
            <img src={state.headLogo} className="avatar-img"/>
          </span>

          <Row className="text-base mb-4">
            <Col span={6}><span className="text-gray-600 mr-4">Country name:</span>{projectInfo ? projectInfo.countryName : ''}</Col>
            <Col span={6}><span className="text-gray-600 mr-4">Sector:</span>{projectInfo ? projectInfo.industryName : ''}</Col>
            <Col span={8}><span className="text-gray-600 mr-4">Procuring agency:</span>{projectInfo ? projectInfo.procuringAgency : ''}</Col>
          </Row>
          <Row className="text-base mb-4">
            <Col span={6}><span className="text-gray-600 mr-4">Project stage:</span>{projectInfo ? projectInfo.stageName : ''}</Col>
            <Col span={6}><span className="text-gray-600 mr-4">Planned development year:</span>{projectInfo ? projectInfo.plannedYear : ''}</Col>
            <Col span={8}><span className="text-gray-600 mr-4">Email:</span>{projectInfo ? projectInfo.email : ''}</Col>
          </Row>
          <Row className="text-base mb-4">
            <Col span={6}><span className="text-gray-600 mr-4">Contact:</span>{projectInfo ? projectInfo.projectContact : ''}</Col>
            <Col span={6}><span className="text-gray-600 mr-4">Phone:</span>{projectInfo ? projectInfo.phone : ''}</Col>
            <Col span={8}><span className="text-gray-600 mr-4">Authorization documents of the government:</span>{projectInfo ? projectInfo.governmentAuthDoc : ''}</Col>
          </Row>
        </div>
      </div>

      {/* 阶段详情 */}
      <div className="stage">
        <Tabs defaultActiveKey="1" size='large'>
          <TabPane tab="preparation stage" key="1">
            <div className="stage">
              {
                tabData.identification ? tabData.identification.map((table: any, _index: number) => (
                  <div key={`ident${table.title as string}`}>
                    <p className="text-base font-medium mb-4 mt-2">{table.title}</p>
                    {
                      table.data.map((info: any) => (<div key={`${getId()}`}>
                        <Row>
                          <Col span={5} className="col-first">
                            {info.key}
                          </Col>
                          <span className="divider"/>
                          <Col span={18}>
                            {info.data}
                          </Col>
                        </Row>
                      </div>
                      ))
                    }
                  </div>
                )) : <></>
              }
            </div>
          </TabPane>

          <TabPane tab="Procurement Stage" key="2">
            <div className="stage">
              {
                tabData.procurement ? tabData.procurement.map((table: any, _index: number) => (
                  <div key={`procu${table.title as string}${_index}`}>
                    <p className="text-base font-medium mb-4 mt-2">{table.title}</p>
                    {
                      table.data.map((info: any, index: number) => (<div key={`proItem${info.key as string}${index}`}>
                        <Row>
                          <Col span={5} className="col-first">
                            {info.key}
                          </Col>
                          <span className="divider"/>
                          <Col span={18}>
                            {info.data}
                          </Col>
                        </Row>
                      </div>
                      ))
                    }
                  </div>
                )) : <></>
              }
            </div>
          </TabPane>

          <TabPane tab="Implementation Stage" key="3">
            <div className="stage">
              {
                tabData.implementation ? tabData.implementation.map((table: any, _index: number) => (
                  <div key={`imple${table.title as string}${_index}`}>
                    <p className="text-base font-medium mb-4 mt-2">{table.title}</p>
                    {
                      table.data.map((info: any, index: number) => (<div key={`impleItem${info.key as string}${index}`}>
                        <Row>
                          <Col span={5} className="col-first">
                            {info.key}
                          </Col>
                          <span className="divider"/>
                          <Col span={18}>
                            {info.data}
                          </Col>
                        </Row>
                      </div>
                      ))
                    }
                  </div>
                )) : <></>
              }
            </div>
          </TabPane>

          <TabPane tab="Transfer Stage" key="4">
            <div className="stage">
              {
                tabData.transfer ? tabData.transfer.map((table: any, _index: number) => (
                  <div key={`trans${table.title as string}${_index}`}>
                    <p className="text-base font-medium mb-4 mt-2">{table.title}</p>
                    {
                      table.data.map((info: any, index: number) => (<div key={`transItem${info.key as string}${index}`}>
                        <Row>
                          <Col span={5} className="col-first">
                            {info.key}
                          </Col>
                          <span className="divider"/>
                          <Col span={18}>
                            {info.data}
                          </Col>
                        </Row>
                      </div>
                      ))
                    }
                  </div>
                )) : <></>
              }
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
});

export default ProjectDetails;
